<template>
	<div class="m-b-md">
		<ul class="pagination">
			<li :class="{'disabled': pageNo == 1}" v-show="total > pageSize"><a href="javascript:;" @click="setPageNo(pageNo - 1)">
					<i class="fa fa-chevron-left"></i> </a></li>
			<li :class="{'disabled': pageNo == 1}" v-show="page > pageGroup"><a href="javascript:;" @click="setPageNo(1)"> 首页
				</a></li>
			<li v-for="p in grouplist" :class="{'active': pageNo == p.val}"><a href="javascript:;" @click="setPageNo(p.val)">
					{{ p.text }} </a>
			</li>
			<li :class="{'disabled': pageNo == page}" v-show="page > pageGroup"><a href="javascript:;" @click="setPageNo(page)">
					尾页 </a></li>
			<li :class="{'disabled': pageNo == page}" v-show="total > pageSize"><a href="javascript:;" @click="setPageNo(pageNo + 1)">
					<i class="fa fa-chevron-right"></i></a></li>
		</ul>
		<h5 class="pull-right" style="margin-top: 28px;">共{{ total }}条 | {{ page }}页</h5>
	</div>
</template>

<script>
	import { defineComponent, ref } from 'vue'
	
	export default {
		name: 'pagination',
		// data() {
		// 	return {
		// 		total: 0, // 记录总条数
		// 		pageSize: 2, // 每页显示条数
		// 		pageNo: 1 // 当前的页数
		// 	}
		// },
		props: {
			total: { // 数据总条数
				type: Number,
				default: 0
			},
			pageSize: { // 每页显示条数
				type: Number,
				default: 10
			},
			pageNo: { // 当前页码
				type: Number,
				default: 1
			},
			pageGroup: { // 分页条数
				type: Number,
				default: 5,
				coerce: function(v) {
					v = v > 0 ? v : 5;
					return v % 2 === 1 ? v : v + 1;
				}
			}
		},
		setup(props, { emit }) {
			const total = props.total;
			const pageSize = props.pageSize;
			const pageNo = props.pageNo;

			function setPageNo2(idx) {
				if (pageNo != idx && idx > 0 && idx < Math.ceil(total / pageSize) + 1) {

					// 修改对应的props的数据
					emit('update:pageNo', idx)
					props.pageNo = idx;
					// emit('onChangePageNo', idx)
				}
			}

			return {
				total,
				pageSize,
				pageNo,
				setPageNo2
			}
		},
		computed: {
			page: function() { // 总页数
				return Math.ceil(this.total / this.pageSize);
			},
			grouplist: function() { // 获取分页页码
				var len = this.page,
					temp = [],
					list = [],
					count = Math.floor(this.pageGroup / 2),
					center = this.pageNo;
				if (len <= this.pageGroup) {
					while (len--) {
						temp.push({
							text: this.page - len,
							val: this.page - len
						});
					}
					return temp;
				}
				while (len--) {
					temp.push(this.page - len);
				}
				var idx = temp.indexOf(center);
				(idx < count) && (center = center + count - idx);
				(this.pageNo > this.page - count) && (center = this.page - count);
				temp = temp.splice(center - count - 1, this.pageGroup);
				do {
					var t = temp.shift();
					list.push({
						text: t,
						val: t
					});
				} while (temp.length);
				if (this.page > this.pageGroup) {
					(this.pageNo > count + 1) && list.unshift({
						text: '...',
						val: list[0].val - 1
					});
					(this.pageNo < this.page - count) && list.push({
						text: '...',
						val: list[list.length - 1].val + 1
					});
				}
				return list;
			}
		},
		methods: {
			setPageNo(pageNo){
				alert(pageNo)
				this.setPageNo2(pageNo);
			}
		}
	}
</script>

<style>
</style>
